<template>
    <!-- component/sigincalendar/index.wxml -->
    <view class="wrap">
        <view class="header">
            <view class="" v-for="(item, index) in date" :key="index">
                {{ item }}

                <view></view>
            </view>
        </view>
        <view class="date-box">
            <view :class="isToday == item.isToday ? 'nowDay' : ''" :data-date="item.isToday" v-for="(item, index) in dateArr" :key="index">
                <view class="date-head">
                    <view>{{ item.dateNum }}</view>
                </view>

                <view class="date-weight">{{ item.weight }}</view>
            </view>
        </view>
    </view>
</template>

<script>
// component/sigincalendar/index.js
export default {
    data() {
        return {
            year: 0,
            month: 0,
            date: ['日', '一', '二', '三', '四', '五', '六'],
            dateArr: [],
            isToday: 0
        };
    },
    /**
     * 组件的属性列表
     */
    props: {},
    beforeMount() {
        this.onLoad();
    },
    //在组件实例进入页面节点树时执行
    //在组件实例被从页面节点树移除时执行
    destroyed() {},
    /**
     * 组件的方法列表
     */
    methods: {
        onLoad() {
            let now = new Date();
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            this.dateInit();
            this.setData({
                year: year,
                month: month,
                isToday: '' + year + month + now.getDate()
            });
        },

        dateInit(setYear, setMonth) {
            //全部时间的月份都是按0~11基准，显示月份才+1
            let dateArr = []; //需要遍历的日历数组数据

            let arrLen = 0; //dateArr的数组长度

            let now = setYear ? new Date(setYear, setMonth) : new Date();
            let year = setYear || now.getFullYear();
            let nextYear = 0;
            let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数

            let nextMonth = month + 1 > 11 ? 1 : month + 1;
            let startWeek = new Date(year + ',' + (month + 1) + ',' + 1).getDay(); //目标月1号对应的星期

            let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天

            let obj = {};
            let num = 0;

            if (month + 1 > 11) {
                nextYear = year + 1;
                dayNums = new Date(nextYear, nextMonth, 0).getDate();
            } // 加上这个月的第一天之前的会有是多少天

            arrLen = startWeek + dayNums;

            for (let i = 0; i < arrLen; i++) {
                if (i >= startWeek) {
                    num = i - startWeek + 1;
                    obj = {
                        isToday: '' + year + (month + 1) + num,
                        dateNum: num,
                        weight: ''
                    };
                } else {
                    obj = {};
                }

                dateArr[i] = obj;
            }

            this.setData({
                dateArr: dateArr
            });
        },

        // 上个月
        lastMonth() {
            //全部时间的月份都是按0~11基准，显示月份才+1
            let year = this.month - 2 < 0 ? this.year - 1 : this.year;
            let month = this.month - 2 < 0 ? 11 : this.month - 2;
            this.setData({
                year: year,
                month: month + 1
            });
            this.dateInit(year, month);
        },

        // 下个月
        nextMonth() {
            //全部时间的月份都是按0~11基准，显示月份才+1
            let year = this.month > 11 ? this.year + 1 : this.year;
            let month = this.month > 11 ? 0 : this.month;
            this.setData({
                year: year,
                month: month + 1
            });
            this.dateInit(year, month);
        }
    }
};
</script>
<style>
/* component/sigincalendar/index.wxss */
date-show {
    position: relative;
    width: 250rpx;
    font-family: PingFang-SC-Regular;
    font-size: 40rpx;
    color: #282828;
    text-align: center;
    margin: 59rpx auto 10rpx;
}

.lt-arrow,
.rt-arrow {
    position: absolute;
    top: 1rpx;
    width: 60rpx;
    height: 60rpx;
}

.lt-arrow image,
.rt-arrow image {
    width: 14rpx;
    height: 26rpx;
}

.lt-arrow {
    left: -110rpx;
    transform: rotate(180deg);
}

.rt-arrow {
    right: -100rpx;
}

.header {
    font-size: 0;
    padding: 0 24rpx;
}

.header > view {
    display: inline-block;
    width: 14.285%;
    color: #333;
    font-size: 30rpx;
    text-align: center;
    border-bottom: 1px solid #d0d0d0;
    padding: 39rpx 0;
}

.date-box {
    font-size: 0;
    padding: 10rpx 0;
}

.date-box > view {
    position: relative;
    display: inline-block;
    width: 14.285%;
    color: #020202;
    font-size: 40rpx;
    text-align: center;
    vertical-align: middle;
    margin: 15rpx 0;
}

.date-head {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 26rpx;
}

.nowDay .date-head {
    width: 40rpx;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background-color: #22a7f6;
    margin: 0 auto;
}

.date-weight {
    font-size: 22rpx;
    padding: 15rpx 0;
}

.nowDay .date-weight {
    color: #22a7f6;
}

.one {
    position: absolute;
    bottom: 0;
    right: 5rpx;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: red;
}

.two {
    position: absolute;
    bottom: 30rpx;
    right: 5rpx;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: blue;
}
</style>
